<template>
  <q-header :reveal="!settingStore.fixedHeader" :reveal-offset="0">
    <q-toolbar>
      <!-- 导航菜单 -->
      <q-btn flat dense round :icon="mdiMenu" @click="appStore.sidebar = !appStore.sidebar" />

      <!-- 面包屑 -->
      <breadcrumb />

      <q-space />

      <!-- 错误日志 -->
      <error-log v-if="settingStore.errorLog" />

      <!-- 全屏显示 -->
      <q-btn v-if="showFullscreen" dense flat round :icon="fullscreenIcon" @click="toogleFullscreen">
        <q-tooltip>{{ fullscreenTooltip }}</q-tooltip>
      </q-btn>

      <!-- 界面配置 -->
      <q-btn dense flat round :icon="mdiCogOutline" @click="appStore.setting = true">
        <q-tooltip> 布局设置</q-tooltip>
      </q-btn>

      <!-- 用户中心 -->
      <user-avatar />
    </q-toolbar>

    <!-- 标签页 -->
    <tags-view v-if="settingStore.tagsView" />
  </q-header>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';
  import { AppFullscreen } from 'quasar';
  import { mdiMenu, mdiCogOutline, mdiFullscreen, mdiFullscreenExit } from '@quasar/extras/mdi-v7';

  import UserAvatar from './UserAvatar.vue';
  import TagsView from './TagsView.vue';
  import Breadcrumb from './Breadcrumb.vue';
  import ErrorLog from './ErrorLog.vue';
  import { useAppStore, useSettingStore } from 'src/stores';

  const appStore = useAppStore();
  const settingStore = useSettingStore();

  // 全屏显示
  const showFullscreen = computed(() => AppFullscreen.isCapable);
  const fullscreenIcon = computed(() => (AppFullscreen.isActive ? mdiFullscreenExit : mdiFullscreen));
  const fullscreenTooltip = computed(() => (AppFullscreen.isActive ? '退出全屏' : '全屏显示'));
  const toogleFullscreen = () => AppFullscreen.toggle();
</script>
